<template>
	<view style="background-color:#F4F5F7 ;height: 100vh;">
		<!-- 导航栏 -->
		<view>
			<uni-nav-bar title="兑换" :border="false" :fixed="true" background-color="#FFFFFF" :statusBar="true">
			</uni-nav-bar>
			<view style="position: fixed;margin-top:0px;width: 100%; background-color: #FFFFFF;z-index: 2;">
				<u-tabs :list="list1" @click="click" :scrollable="false"></u-tabs>
			</view>
			<!-- 微信兑换 -->
			<view style="position: relative;top: 54px;display: flex;justify-content: space-evenly;">
				<view style="height: 160px;width: 30%;background-color:#FDFDFD; border-radius: 10px;">
					<view style="width: 100%;  position: relative; transform: scale(0.9);margin-top: 5px;">
						<up-image :show-loading="true" src="http://qiniu.gaowa.love/65deb634e14fb1709094452.png"
							width="100%" height="100" mode="aspectFill" @click="click"></up-image>
					</view>
					<view style="display: flex;justify-content: ;margin: 5px 0 0 10px;">
						<text style="font-size: 11px;color: #797783;">50元微信红包</text>
					</view>
					<view style="display: flex;justify-content: ;margin: -5px 0 0 10px;">
						<text
							style="font-size: 11px;margin-top: 10px;font-size: 14px;color: #EC5C60;font-weight: 600;">500&nbsp;&nbsp;<text
								style="font-size: 11px;">呜噜币</text></text>
					</view>
				</view>
				<view style="height: 160px;width: 30%;background-color:#FDFDFD; border-radius: 10px;">
					<view style="width: 100%;  position: relative; transform: scale(0.9);margin-top: 5px;">
						<up-image :show-loading="true" src="http://qiniu.gaowa.love/65deb677dccea1709094519.png"
							width="100%" height="100" mode="aspectFill" @click="click"></up-image>
					</view>
					<view style="display: flex;justify-content: ;margin: 5px 0 0 10px;">
						<text style="font-size: 11px;color: #797783;">20元微信红包</text>
					</view>
					<view style="display: flex;justify-content: ;margin: -5px 0 0 10px;">
						<text
							style="font-size: 11px;margin-top: 10px;font-size: 14px;color: #EC5C60;font-weight: 600;">200&nbsp;&nbsp;<text
								style="font-size: 11px;">呜噜币</text></text>
					</view>
				</view>
				<view style="height: 160px;width: 30%;background-color:#FDFDFD; border-radius: 10px;">
					<view style="width: 100%;  position: relative; transform: scale(0.9);margin-top: 5px;">
						<up-image :show-loading="true" src="http://qiniu.gaowa.love/65deb691102841709094545.png"
							width="100%" height="100" mode="aspectFill" @click="click"></up-image>
					</view>
					<view style="display: flex;justify-content: ;margin: 5px 0 0 10px;">
						<text style="font-size: 11px;color: #797783;">10元微信红包</text>
					</view>
					<view style="display: flex;justify-content: ;margin: -5px 0 0 10px;">
						<text
							style="font-size: 11px;margin-top: 10px;font-size: 14px;color: #EC5C60;font-weight: 600;">100&nbsp;&nbsp;<text
								style="font-size: 11px;">呜噜币</text></text>
					</view>
				</view>
			</view>
			<!-- 支付宝兑换 -->
			<view style="position: relative;top: 64px;display: flex;justify-content: space-evenly;">
				<view style="height: 160px;width: 30%;background-color:#FDFDFD; border-radius: 10px;">
					<view style="display: flex; justify-content: space-around;margin-top: 10px;">
						<up-image :show-loading="true" src="http://qiniu.gaowa.love/65deb7707ca621709094768.png"
							width="45" height="45" mode="aspectFill" @click="click"></up-image>
						<text style="font-weight: 800;
						font-size: 16px;">支付宝<br>ALIPAY</text>
					</view>
					<view
						style="display: flex; width: 80%;align-items: center; background-color: #3EAAE2;height: 25px; margin: 10px auto;border-radius: 10px;">
						<view
							style="width: 25px;height: 25px;transform: scale(0.8); background-color: #FFFFFF;border-radius: 50%;display: flex; align-items: center;justify-content: center;">
							<up-image :show-loading="true" src="http://qiniu.gaowa.love/65dec3b1a639d1709097905.png"
								width="15" height="15" mode="aspectFill" @click="click"></up-image>
						</view>
						<text style="transform: scale(0.9);color: #FFFFFF;font-size: 14px;">100 RMB</text>
					</view>
					<view style="width: 80%; margin-top:15px;margin-left: 10px; font-size: 11px;color:#797783 ;">
						<text>100元支付宝..</text>
					</view>
					<view style="width: 90%; margin-top:5px;margin-left: 10px;"><text
							style="color: #EC5C60;font-weight: 600;">1,000
							<text style="font-size: 11px;">呜噜币</text></text></view>
				</view>
				<view style="height: 160px;width: 30%;background-color:#FDFDFD; border-radius: 10px;">
					<view style="display: flex; justify-content: space-around;margin-top: 10px;">
						<up-image :show-loading="true" src="http://qiniu.gaowa.love/65deb7707ca621709094768.png"
							width="45" height="45" mode="aspectFill" @click="click"></up-image>
						<text style="font-weight: 800;
						font-size: 16px;">支付宝<br>ALIPAY</text>
					</view>
					<view
						style="display: flex; width: 80%;align-items: center; background-color: #3EAAE2;height: 25px; margin: 10px auto;border-radius: 10px;">
						<view
							style="width: 25px;height: 25px;transform: scale(0.8); background-color: #FFFFFF;border-radius: 50%;display: flex; align-items: center;justify-content: center;">
							<up-image :show-loading="true" src="http://qiniu.gaowa.love/65dec3b1a639d1709097905.png"
								width="15" height="15" mode="aspectFill" @click="click"></up-image>
						</view>
						<text style="transform: scale(0.9);color: #FFFFFF;font-size: 14px;">50 RMB</text>
					</view>
					<view style="width: 90%; margin-top:15px;margin-left: 10px;font-size: 11px;color:#797783 ;">
						<text>50元支付宝..</text>
					</view>
					<view style="width: 90%; margin-top:5px;margin-left: 10px;"><text
							style="color: #EC5C60;font-weight: 600;">500
							<text style="font-size: 11px;">呜噜币</text></text></view>
				</view>
				<view style="height: 160px;width: 30%;background-color:#FDFDFD; border-radius: 10px;">
					<view style="display: flex; justify-content: space-around;margin-top: 10px;">
						<up-image :show-loading="true" src="http://qiniu.gaowa.love/65deb7707ca621709094768.png"
							width="45" height="45" mode="aspectFill" @click="click"></up-image>
						<text style="font-weight: 800;
						font-size: 16px;">支付宝<br>ALIPAY</text>
					</view>
					<view
						style="display: flex; width: 80%;align-items: center; background-color: #3EAAE2;height: 25px; margin: 10px auto;border-radius: 10px;">
						<view
							style="width: 25px;height: 25px;transform: scale(0.8); background-color: #FFFFFF;border-radius: 50%;display: flex; align-items: center;justify-content: center;">
							<up-image :show-loading="true" src="http://qiniu.gaowa.love/65dec3b1a639d1709097905.png"
								width="15" height="15" mode="aspectFill" @click="click"></up-image>
						</view>
						<text style="transform: scale(0.9);color: #FFFFFF;font-size: 14px;">20 RMB</text>
					</view>
					<view style="width: 90%; margin-top:15px;margin-left: 10px;font-size: 11px;color:#797783 ;">
						<text>20元支付宝..</text>
					</view>
					<view style="width: 90%; margin-top:5px;margin-left: 10px;"><text
							style="color: #EC5C60;font-weight: 600;">200
							<text style="font-size: 11px;">呜噜币</text></text></view>
				</view>
			</view>
		</view>
		<u-tabbar :value="value2" :placeholder="true" @change="name => value2 = name" :fixed="true"
			:safeAreaInsetBottom="true">
			<u-tabbar-item text="首页" icon="home"  @click="click1"></u-tabbar-item>
			<u-tabbar-item text="任务" icon="photo" @click="click1" badge=""></u-tabbar-item>
			<u-tabbar-item text="兑换" icon="play-right" @click="click1"></u-tabbar-item>
			<u-tabbar-item text="我的" icon="account" @click="click1"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value2: 2,
				list1: [{
					name: '现金类',
				}, {
					name: '虚拟类',
				}]
			}
		},
		methods: {
			click1: function(e) {
				console.log('click1', e);
				if (e == 3) {
					uni.redirectTo({
						url: "/pages/home/home"
					})
				} else if (e == 1) {
					uni.redirectTo({
						url: "/pages/index/housework"
					})
				} else if (e == 2) {
					uni.navigateTo({
						url: "/pages/cash/cash"
					})
				}else if (e == 0) {
					uni.redirectTo({
						url: "/pages/index/index"
					})
				}
			},
		}
	}
</script>

<style>
</style>